<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<ul class="list">
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
</ul>

<script>

// 暂时性死区 TDZ
// let x = 1;
// if (123) {// 暂时性死区
//     console.log( x );
//     let x = 2;// 不会提升
// }
// console.log( x );

// 在ES6的某个区块中，使用let或const声明的变量，会绑定当前区块，不受外部变量的影响，这种现象在语法上我们称为 暂时性死区

let lis = document.querySelectorAll('.list li');
// for (var i = 0; i < lis.length; i++) {
//     lis[i].onclick = function (){
//         console.log( i );// 4 
//     }
// }

for (let i = 0; i < lis.length; i++) {// 暂时性死区
    lis[i].onclick = function (){
        console.log( i );// 0 1 2 3
    }
}


// const关键字，用于声明常量

// 1.const声明的常量不能重新赋值
// const sex = '男';
// sex = '女';// 报错

// 2.通常常量使用大写字母命名
// const USER_SEX = '男';
// console.log( USER_SEX );// '男'

// 3.常量的属性值可以修改
const obj = {
    name: '小王',
    sex: '男'
}
obj.sex = '女';
console.log( obj.sex );// '女'

obj = {// 重新赋值，报错
    name: 'zhangsan',
    sex: '男'
}

// 其他特征和let一样

// let a;
// a = 123;
// a = 'hello';

// const b;// 报错

</script>
</body>
</html>